<template>
	<view class="serveDetail">
		<view class="part">
			<view class="progress">
				<view class="status" v-if="datas.check_status == '0'">审核中</view>
				<view class="status" v-if="datas.check_status == '1'">退款成功</view>
				<view class="status" v-if="datas.check_status == '2'">退款失败 </view>
				<view class="status" v-if="datas.check_status == '3'">平台同意退货退款</view>
				<view class="status" v-if="datas.check_status == '4'">待平台收货</view>
				<view class="price">￥<text>{{datas.refund_money}}</text></view>
			</view>
			<view class="storeBack">
				<view class="tool dFlex jBetween_aCenter">
					<view class="store dFlex jStart_aCenter">
						<!-- <view class="storeIcon imgPublic">
							<image src="https://kmbs-ytk.oss-cn-qingdao.aliyuncs.com/cMini/afterSale/sLogo.png" mode="widthFix"></image>
						</view> -->
						<text>数字甄选</text>
					</view>
					<button open-type="contact" class="service dFlex jEnd_aCenter">
						<view class="serviceIcon imgPublic">
							<image src="https://kmbs-ytk.oss-cn-qingdao.aliyuncs.com/cMini/kefu.png" mode="widthFix"></image>
						</view>
						<text>联系客服</text>
					</button>
				</view>
				<view class="desc" v-if="datas.check_status == '0'">
					“亲亲，我们已收到您的申请，会在第一时间为您处理，请耐心等待”
				</view>
				<view class="desc" v-if="datas.check_status == '3'" @tap='copy()'>
					<view>“亲亲，平台已同意您提交的申请 请尽快将商品退回</view>
					<view>退货地址（点击该文字可复制）：{{backAdd}}</view>
				</view>
				<view class="desc" v-if="datas.check_status == '2'">
					{{datas.refuse_reason}}
				</view>
			</view>
		</view>
		
		<view class="partForm" v-if="datas.check_status == '3'">
			<view class="line dFlex jBetween_aCenter"> 
				<view class="lineTite">退货物流</view>
				<view class="lineContent dFlex jBetween_aCenter">
					<view class="lineVal">
						<picker mode="selector" :range="logistics" @change="change_logistics">
							<input type="text" disabled="" v-model="ship_type" placeholder="点击选择退货物流">
						</picker>
					</view>
					<view class="rightIcon imgPublic">
						<image src="https://kmbs-ytk.oss-cn-qingdao.aliyuncs.com/cMini/rightIcon.png" mode="widthFix"></image>
					</view>
				</view>
			</view>
			<view class="line dFlex jBetween_aCenter">
				<view class="lineTite">快递单号</view>
				<view class="lineContent dFlex jBetween_aCenter">
					<view class="lineVal">
						<input type="text" v-model="ship_number" placeholder="请输入快递单号">
					</view>
				</view>
			</view>
			<view class="subBtn" @tap='subInfo'>提交申请</view>
		</view>
		<!-- <navigator :url="'./consult?orderDetailId='+orderDetailId+'&order_id='+order_id" hover-class="none" class="line dFlex jBetween_aCenter">
			<view class="lineTite">协商记录</view>
			<view class="lineContent dFlex jBetween_aCenter">
				<view class="lineVal"></view>
				<view class="rightIcon imgPublic">
					<image src="https://kmbs-ytk.oss-cn-qingdao.aliyuncs.com/cMini/rightIcon.png" mode="widthFix"></image>
				</view>
			</view>
		</navigator> -->
		<view class="orderInfo">
			<view class="shop dFlex jStart_aStart">
				<view class="shopImg imgPublic">
					<image :src="shopInfo.goods.main_img" mode="widthFix"></image>
				</view>
				<view class="other">
					<view class="shopName">{{shopInfo.goods.title}}</view>
					<view class='sku'>{{datas.createtime}}</view>
				</view>
			</view>
			<view class="info">
				<view class="info_line" v-if="datas.type == '1'">申请数量：{{datas.refund_num}}</view>
				<view class="info_line" v-if="datas.type == '2'">订单编号：{{datas.old_orderno}}</view>
				<view class="info_line">申请类型：{{refund_type}}</view>
				<view class="info_line">申请原因：{{datas.refund_reason}}</view>
				<view class="info_line">补充说明：{{datas.refund_reason_desc}}</view>
				<view class="info_line">申请时间：{{datas.createtime}}</view>
				<view class="info_line">联系电话：{{datas.mobile}}</view>
			</view>
			<view class="imgs">
				<view class="imgOne imgPublic" v-for="(item,index) in datas.refund_reason_imgs" :key='index' @tap='lookBig(item)'>
					<image :src="item" mode="widthFix"></image>
				</view>
			</view>
		</view>
		<view class="seat"></view>
		<!-- 退款中或者退款失败时显示 -->
		<view class="btns dFlex jEnd_aCenter">
			<!-- 退款失败 -->
			<view class="btn" v-if="datas.check_status == '2'" @tap.stop='applyAgain'>再次申请售后</view>
			<!-- 退款中、退款失败 -->
			<view class="btn" v-if="datas.check_status == '0'" @tap.stop='cancelApply'>取消申请</view>
		</view>
	</view>
</template>

<script>
	import {
		orderList,refundLog,cancelRefund,submitShipRefund
	} from '@/tools/http.js';
	import {domain} from '@/tools/config.js';
	import tools from '@/tools/tools.js';
	export default {
		data() {
			return {
				// 物流公司
				logistics:['顺丰快递','中通快递','圆通快递','韵达快递','极兔快递','德邦快递','申通快递','其他'],
				ship_type:'',//选择的快递公司
				ship_number:'',//单号
				
				kind:[
					{id:2,name:'我要退货退款（已提货）'},
					{id:1,name:'我要退款（货在服务点）'},
					{id:3,name:'我要退款（缺货/货未送达）'},
				],
				kind2:[
					{id:2,name:'我要退货退款（已取货）'},
					{id:1,name:'我要退款（无需退货）'},
				],
				refund_type:'',
				
				orderDetailId:'',
				order_id:'',
				
				shopInfo:{},
				datas:{},
				backAdd:'',//退货地址
			};
		},
		onLoad(e) {
			this.orderDetailId = e.orderDetailId;
			this.order_id = e.order_id;
			this.initShop();
			this.initData(); 
		},
		methods:{
			// 商品详情
			async initShop(){
				let res = await orderList({
					ids:this.order_id
				});
				if(res.length){
					res[0].ordergoods.map((item,index)=>{
						if(item.id == this.orderDetailId){
							item.goods.main_img = item.goods.main_img.startsWith('https')?item.goods.main_img:domain+item.goods.main_img;
							this.shopInfo = item;
						}
					})
				}
				console.log('商品信息');
				console.log(this.shopInfo);
			},
			async initData(){
				let res = await refundLog({
					order_detail_id:this.orderDetailId,
				})
				console.log('售后信息');
				console.log(res);
				if(res.length){
					res[0].createtime = tools.timestamptoData(res[0].createtime * 1000);
					this.refund_type = res[0].type == '1'?this.kind[tools.getIdx(this.kind,'id',res[0].refund_type)].name:this.kind2[tools.getIdx(this.kind2,'id',res[0].refund_type)].name;
					res[0].refund_reason_imgs = res[0].refund_reason_imgs.split(',');
					this.datas = res[0];
					if(res[0].check_status == '3'){
						let res2 = await returnRefundAddress({});
						if(res2){
							this.backAdd = res2;
						}
					}
				}
			},
			// 再次申请
			applyAgain(){
				uni.showModal({
					content:'确定再次申请该订单的售后？',
					success: (op) => {
						if(op.confirm){
							uni.redirectTo({
								url:'./applySale?order_id='+this.order_id+'&order_detail_id='+this.orderDetailId+'&refund_type='+this.datas.refund_type+'&type='+this.datas.type,
							})
						}
					}
				})
				
			},
			// 复制退货地址
			copy(){
				uni.setClipboardData({
					data:this.backAdd
				})
			},
			// 取消申请
			cancelApply(){
				uni.showModal({
					content:'确定取消该订单的售后申请？',
					success: async (op) => {
						if(op.confirm){
							let res = await cancelRefund({
								refund_order_id:this.datas.id,
							});
							if(res){
								uni.showToast({
									title:'售后已取消',
									icon:"success"
								})
								setTimeout(()=>{
									uni.navigateBack({
										delta:1
									})
								},1650)
								
							}
						}
					}
				})
			},
			// 查看大图
			lookBig(thumb){
				uni.previewImage({
					current:thumb,
					urls:this.datas.refund_reason_imgs,
				})
			},
			// 选择物流公司
			change_logistics(e){
				this.ship_type = this.logistics[e.detail.value];
			},
			// 提交物流信息
			async subInfo(){
				if(!this.ship_type){
					uni.showToast({
						title:'请选择物流公司',
						icon:"none"
					})
					returnl
				}
				if(!this.ship_number){
					uni.showToast({
						title:'请填写快递单号',
						icon:"none"
					})
					return
				}
				let res = await submitShipRefund({
					refund_order_id:this.datas.id,
					ship_type:this.ship_type,
					ship_number:this.ship_number,
				})
				if(res){
					uni.showToast({
						title:'信息已保存',
						icon:"success",
					})
					this.initData();
				}
			}
		}
	}
</script>

<style lang="scss">
	.btns{
		width:100%;
		background: white;
		padding: 24rpx 30rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		box-sizing: border-box;
		.btn{
			width: max-content;
			padding: 8px 24rpx;
			border-radius: 50px;
			border: 1px solid #aaaaaa;
			margin-left: 12px;
			font-size: 13px;
		}
	}
	.partForm{
		width: 100%;
		background: white;
		margin-bottom: 20rpx;
		padding-bottom: 20rpx;
		.subBtn{
			width: 60%;
			text-align: center;
			color: white;
			margin: 0 auto;
			font-size:12px;
			border-radius: 50px;
			padding: 20rpx 0;
			background: linear-gradient(180deg, #FC9700 0%, #FF5000 100%);
		}
		.line{
			background: white;
			padding: 26rpx 30rpx;
			box-sizing: border-box;
			margin-bottom: 0;
			.lineTite{
				width: max-content;
				margin-right: 40rpx; 
				font-size: 15px;
				color: #666666;
			}
			.lineContent{
				flex: 1;
				.ipt{
					margin-top: 4px;
					color: #333333;
					font-size: 27px;
					font-weight: bold;
				}
				.lineVal{
					flex: 1;
					margin-right: 12px;
				}
				.rightIcon{
					width: 30rpx;
				}
			}
		}
	}
	.orderInfo{
		background: white;
		padding: 40rpx 30rpx;
		box-sizing: border-box;
		.imgs{
			width: 100%;
			.imgOne{
				width: 158rpx;
				height: 158rpx;
				margin-right:15rpx;
				margin-bottom: 20rpx;
				display: inline-block;
			}
			.imgOne:nth-child(4n + 4){
				margin-right: 0;
			}
		}
		.info{
			width: 100%;
			margin-bottom: 30rpx;
			.info_line{
				width: 100%;
				color: #666666;
				margin-bottom: 14rpx;
			}
			.info_line:last-child{
				margin-bottom: 16rpx;
			}
		}
		.shop{
			width: 100%;
			margin-bottom: 30rpx;
			.shopImg{
				width: 120rpx;
				height:120rpx;
				margin-right: 20rpx;
				overflow: hidden;
			}
			.other{
				width: calc(100% - 70px);
				.sku{
					color:#999999;
					margin-top: 12rpx;
				}
				.shopName{
					width: 100%;
					color: #666666;
					font-size: 15px;
					font-weight: bold;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}
		}
	}
	.line{
		background: white;
		padding: 26rpx 30rpx;
		box-sizing: border-box;
		margin-bottom: 20rpx;
		.lineTite{
			width: max-content;
			margin-right: 40rpx; 
			font-size: 15px;
			color: #666666;
		}
		.lineContent{
			flex: 1;
			.rightIcon{
				width: 30rpx;
			}
		}
	}
	.part{
		width: 100%;
		background: white;
		padding:0 4% 30rpx;
		box-sizing: border-box;
		margin-bottom: 20rpx;
		.storeBack{
			width: 100%;
			.desc{
				width: 100%;
				margin-top: 20rpx;
				background: #F4F4F4;
				color: #666666;
				padding: 24rpx;
				box-sizing: border-box;
				border-radius: 12rpx;
			}
			.storeIcon,.serviceIcon{
				width: 48rpx;
				margin-right: 10rpx;
			}
		}
		.progress{
			padding: 40rpx 0 30rpx;
			font-size: 18px;
			font-weight: bold;
			border-bottom: 0.5px solid #F4F4F4;
			margin-bottom: 30rpx;
			.price{
				margin-top: 16rpx;
				font-size: 20px;
				text{
					font-size: 30px;
				}
			}
		}
	}
</style>
